import Image from "next/image";

/**
 * 3D翻转效果
 * @returns {JSX.Element}
 * @constructor
 */

export default function Flip() {
  return (
    <div className="p-24 bg-black perspective-distant">
      <div className={"w-96 h-64 hover:rotate-y-180 transform-3d duration-1000"}>
        <div className={"absolute inset-0 bg-pink-400 rotate-y-180 backface-hidden flex justify-center items-center"}>
          <img className={"w-full"} src={"https://i.pravatar.cc/150?img=5"}/>
        </div>
        <div className={"absolute inset-0 bg-cyan-600 backface-hidden flex justify-center items-center"}>
          <img className={"w-full"} src={"https://i.pravatar.cc/150?img=3"}/>

        </div>
      </div>
    </div>
  );
}
